<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BuleSpace 注册与登录</title>
    <link rel="stylesheet" href="./css/register.css">

    <link href="https://unpkg.com/layui@2.7.6/dist/css/layui.css" rel="stylesheet">
    <script src="https://unpkg.com/layui@2.7.6/dist/layui.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <!-- 导入字体图标 -->
    <script>
        function load_pageData() {
            layui.use('layer', function() {
                let layer = layui.layer;
                //Loading
                let index = layer.load(0, {
                    shade: false
                }); //0代表加载的风格，支持0-2
            });
        }

        function createuser() {
            // 获取input的值
            //var inputValue = document.getElementById('inputValue').value;
            var Name = document.getElementById("Name").value;
            var Age = document.getElementById("Age").value;
            var Address = document.getElementById("Address").value;
            var Links = document.getElementById("Links").value;
            if (Name !== "" && Age !== "" && Address !== "" && Links !== "" && Links.length == 11) {
                load_pageData();//动画
                // 发送AJAX请求到本地PHP页面
                $.ajax({
                    url: './device/mysql.php?action=createuser', // 替换为你的PHP页面路径
                    type: 'GET',
                    data: {
                        //value: inputValue,
                        Name: Name,
                        Age: Age,
                        Address: Address,
                        Links: Links
                    },
                    success: function(response) {
                        if (response != false) {
                            // 修改p标签的内容
                            $(".btn-grad").text(response)
                            $(".user_info").hide()
                            $(".user_success_register").show()
                            $(".login_button").on("click", function() {
                                $(".user_info").show()
                            });
                            
                            $(".register_button").on("click", function() {
                                $(".user_info").hide()
                                $(".user_success_register").show()
                                location.reload();
                            });
                            layer.closeAll("loading");//关闭动画
                        } else {
                            $(".btn-grad").text("返回")
                            $(".user_info").hide()
                            $(".user_fail_register").show()
                            $(".btn-grad").on("click", function() {
                                $(".user_info").show()
                                location.reload();
                            });
                            layer.closeAll("loading");//关闭动画
                        }
                    },
                    error: function() {
                        layer.closeAll("loading");//关闭动画
                        layer.msg('啊这？好像请求失败了？刷新试试.');
                    }
                });
            } else {
                layer.msg('信息不能为空，且联系方式需为11位号码');
            }
        }
        //登录逻辑
        function login_user() {
            // 获取input的值
            //var inputValue = document.getElementById('inputValue').value;
            var Account = document.getElementById("Account").value;
            var Password = document.getElementById("Password").value;
            if (Password !== "" && Account !== "" && Account.length == 11) {
                load_pageData();//动画
                // 发送AJAX请求到本地PHP页面
                $.ajax({
                    url: './device/mysql.php?action=loginuser', // 替换为你的PHP页面路径
                    type: 'POST',
                    data: {
                        //value: inputValue,
                        Account: Account,
                        Password: Password
                    },
                    success: function(response) {
                        //
                        if (response == "false") {
                            $(".user_info").hide()
                            $(".user_fail_register").show()
                            $(".btn-grad").on("click", function() {
                                location.reload();
                            });
                            layer.closeAll("loading");//关闭动画
                        } else {
                            layer.closeAll("loading");//关闭动画
                            window.location.replace("./login.php?key=" + response);
                        }
                    },
                    error: function() {
                        layer.msg('啊这？好像登录失败了？刷新试试.');
                        layer.closeAll("loading");//关闭动画
                    }
                });
            } else {
                layer.msg('信息不能为空，且联系方式需为11位号码');
            }
        }
    </script>
</head>

<body>
    <div class="shell">
        <div class="container a-container" id="a-container">
            <form action="" method="" class="form" id="a-form">
                <h2 class="form_title title">创建账号</h2>
                <!--<div class="form_icons">
                    <i class="iconfont icon-QQ"></i>
                    <i class="iconfont icon-weixin"></i>
                    <i class="iconfont icon-bilibili-line"></i>
                </div>-->
                <div class="user_info">
                    <span class="form_span">请填写相关信息以完成注册，密码将自动生成，手机号将作为登录账户</span>
                    <input type="text" class="form_input" id="Name" placeholder="姓名/昵称/账号">
                    <input type="text" class="form_input" id="Links" placeholder="手机号码">
                    <input type="text" class="form_input" id="Age" placeholder="年龄 ">
                    <input type="text" class="form_input" id="Address" placeholder="地址"><br />
                    <button class="form_button button submit" onclick="createuser();"> 注册自动获取Key</button>
                </div>
                <div class="user_success_register">
                    <div class="ico"></div>
                    <h1><b>注册成功</b></h1>
                    <h2><b>你的登录Key为</b></h2>
                    <div class="btn-grad"></div>
                </div>
                <div class="user_fail_register">
                    <div class="ico"></div>
                    <h1><b>注册失败</b></h1>
                    <h2><b>可能你的手机号码已经被使用？！</b></h2>
                    <div class="btn-grad">ILOY#@9!s</div>
                </div>
            </form>
        </div>

        <div class="container b-container" id="b-container">
            <form action="" method="" class="form" id="b-form">
                <h2 class="form_title title">登录账号</h2>
                <!--<div class="form_icons">
                    <i class="iconfont icon-QQ"></i>
                    <i class="iconfont icon-weixin"></i>
                    <i class="iconfont icon-bilibili-line"></i>
                </div>-->
                <div class="user_info">
                    <span class="form_span">请输入账户名与Key进行登录（测试登录19355199167，8e9caD）</span>
                    <input type="text" class="form_input" id="Account" placeholder="账户名/手机号码 *">
                    <input type="password" class="form_input" id="Password" placeholder="6位Key">
                    <button class="form_button button submit " onclick="login_user();">登录</button>

                    <!--<a class="form_link">忘记密码？</a>-->
                </div>
                <div class="user_fail_register">
                    <div class="ico"></div>
                    <h1><b>登录失败</b></h1>
                    <h2><b>可能你的账户密码错误呐</b></h2>
                    <div class="btn-grad">返回</div>

                </div>
            </form>
        </div>

        <div class="switch" id="switch-cnt">
            <div class="switch_circle"></div>
            <div class="switch_circle switch_circle-t"></div>
            <div class="switch_container" id="switch-c1">
                <h2 class="switch_title title" style="letter-spacing: 0;">户外监护解决方案</h2>
                <p class="switch_description description">登录buleSpace,管理我的设备信息<br />预览实时监护数据</p>
                <button class="switch_button button switch-btn login_button">去登录</button>
            </div>

            <div class="switch_container is-hidden" id="switch-c2">
                <h2 class="switch_title title" style="letter-spacing: 0;">特殊人群安全监护</h2>
                <p class="switch_description description">注册为BuleSpace用户<br />体验新的老龄化人群户外安全监护方案</p>
                <button class="switch_button button switch-btn register_button">去注册</button>
            </div>
        </div>
    </div>
</body>

</html>
<!--
<script>
    $(document).ready(function() {
        $('.user_info').on('submit', function(event) {
            event.preventDefault(); // 阻止表单默认提交行为
            //var Name = document.getElementById("Name").value;
            //var Age = document.getElementById("Age").value;
            //var Address = document.getElementById("Address").value;
            //var Links = document.getElementById("Links").value;
            var formData = $(this).serialize(); // 获取表单数据
            $.ajax({
                url: './device/mysql.php',
                type: 'GET',
                dataType: 'text',
                data: formData,
                success: function(response) {
                    $('.btn-grad').html(response); // 将PHP返回值修改到页面的p标签中
                },
                error: function(xhr, status, error) {
                    console.error('Error: ' + error);
                }
            });
        });
    });
</script>-->
<script>
    let switchCtn = document.querySelector("#switch-cnt");
    let switchC1 = document.querySelector("#switch-c1");
    let switchC2 = document.querySelector("#switch-c2");
    let switchCircle = document.querySelectorAll(".switch_circle");
    let switchBtn = document.querySelectorAll(".switch-btn");
    let aContainer = document.querySelector("#a-container");
    let bContainer = document.querySelector("#b-container");
    let allButtons = document.querySelectorAll(".submit");

    let getButtons = (e) => e.preventDefault()
    let changeForm = (e) => {
        // 修改类名
        switchCtn.classList.add("is-gx");
        setTimeout(function() {
            switchCtn.classList.remove("is-gx");
        }, 1500)
        switchCtn.classList.toggle("is-txr");
        switchCircle[0].classList.toggle("is-txr");
        switchCircle[1].classList.toggle("is-txr");

        switchC1.classList.toggle("is-hidden");
        switchC2.classList.toggle("is-hidden");
        aContainer.classList.toggle("is-txl");
        bContainer.classList.toggle("is-txl");
        bContainer.classList.toggle("is-z");
    }
    // 点击切换
    let shell = (e) => {
        for (var i = 0; i < allButtons.length; i++)
            allButtons[i].addEventListener("click", getButtons);
        for (var i = 0; i < switchBtn.length; i++)
            switchBtn[i].addEventListener("click", changeForm)
    }
    window.addEventListener("load", shell);
</script>
</body>

</html>